﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../Lib/Css/site.css" rel="stylesheet" />
    <script src="../Lib/Js/jquery.min.js"></script>
    <script src="../Lib/Js/JSXTransformer.js"></script>
    <script src="../Lib/Js/react.js"></script>
</head>
<body>
    <p>Ajax</p>
    <div id="d1"></div>
</body>
</html>
<script type="text/jsx">
    var UserInfo = React.createClass({
        getInitialState:function(){
            return {userName:"",age:""};
        },
        componentDidMount:function(){
            $.get(this.props.url,function(result){
                var d = eval("("+result+")")
                if(this.isMounted()){
                    this.setState({userName:d.name,age:d.age});
                }
            }.bind(this));
        },
        render:function(){
            return (
                <div>
                    userName is : {this.state.userName} and age is {this.state.age}!!!
                </div>
            );
        }   
    });

    React.render(
       <UserInfo url="ajax.aspx?tag=react" />, $("#d1").get(0)
    );
</script>